<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts</title>
    <script src="../echarts/echarts.min.js"></script>
    <script src="../bootstrap/jquery.3.2.1.min.js"></script>
</head>
<body>
    <div>
        科目：<select>
        <option value="1">语文</option>
        <option value="2">数学</option>
        <option value="3">外语</option>
        <option value="4">物理</option>
        <option value="5">化学</option>
        <option value="6">生物</option>
        <option value="7">政治</option>
        <option value="8">历史</option>
        <option value="9">地理</option>
        <option value="10">理综</option>
        <option value="11">文综</option>
    </select><br><br>
    </div>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        $(document).ready(function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            //数据加载完之前先显示一段简单的loading动画
            myChart.showLoading();
            var scorescope = ['scorescope', '个人成绩', '班级成绩', '年级成绩'];
            $.ajax({
                url: "../echarts/findall",    //请求发送到TestServlet处
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    var data = result.data;
                    var scores = [];
                    let  scorelist = data.scores;
                    console.log(scorelist);
                    for (let i = 0; i < scorelist.length; i++) {
                        let score = {
                            scorescope:scorelist[i].testname,'个人成绩':scorelist[i].selfscore,'班级成绩':scorelist[i].classscore,'年级成绩':scorelist[i].gradescore,
                        }
                        console.info(score);
                        scores.push(score);
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    myChart.setOption({
                        title:{
                            text:data.subject
                        },
                        legend: {},
                        tooltip: {},
                        dataset: {
                            dimensions: scorescope,
                            source: scores
                        },
                        xAxis: {type: 'category'},
                        yAxis: {},
                        // Declare several bar series, each will be mapped
                        // to a column of dataset.source by default.
                        series: [
                            {type: 'bar'},
                            {type: 'bar'},
                            {type: 'bar'}
                        ]
                    })
                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            })

        })
    </script>
</body>
</html>